<template>
  <view>
    <view class="uni-container">
      <uni-table
        ref="table"
        :loading="loading"
        border
        stripe
        type="selection"
        emptyText="暂无更多数据"
        @selection-change="selectionChange"
      >
        <uni-tr>
          <uni-th width="150" align="center">日期</uni-th>
          <uni-th width="150" align="center">姓名</uni-th>
          <uni-th align="center">地址</uni-th>
          <uni-th width="204" align="center">设置</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td>{{ item.date }}</uni-td>
          <uni-td>
            <view class="name">{{ item.name }}</view>
          </uni-td>
          <uni-td align="center">{{ item.address }}</uni-td>
          <uni-td>
            <view class="uni-group">
              <button class="uni-button" size="mini" type="primary">
                修改
              </button>
              <button class="uni-button" size="mini" type="warn">删除</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <view class="uni-pagination-box"
        ><uni-pagination
          show-icon
          :page-size="pageSize"
          :current="pageCurrent"
          :total="total"
          @change="change"
      /></view>
    </view>
  </view>
</template>
<script>
  import tableData from "./tableData.js";
  export default {
    data() {
      return {
        searchVal: "",
        tableData: [],
        // 每页数据量
        pageSize: 10,
        // 当前页
        pageCurrent: 1,
        // 数据总量
        total: 0,
        loading: false,
      };
    },
    onLoad() {
      this.selectedIndexs = [];
      this.getData(1);
    },
    methods: {
      // 多选处理
      selectedItems() {
        return this.selectedIndexs.map((i) => this.tableData[i]);
      },
      // 多选
      selectionChange(e) {
        this.selectedIndexs = e.detail.index;
      },
      //批量删除
      delTable() {},
      // 分页触发
      change(e) {
        this.$refs.table.clearSelection();
        this.selectedIndexs.length = 0;
        this.getData(e.current);
      },
      // 搜索
      search() {
        this.getData(1, this.searchVal);
      },
      // 获取数据
      getData(pageCurrent, value = "") {
        this.loading = true;
        this.pageCurrent = pageCurrent;
        this.request({
          pageSize: this.pageSize,
          pageCurrent: pageCurrent,
          value: value,
          success: (res) => {
            this.tableData = res.data;
            this.total = res.total;
            this.loading = false;
          },
        });
      },
      // 伪request请求
      request(options) {
        const { pageSize, pageCurrent, success, value } = options;
        let total = tableData.length;
        let data = tableData.filter((item, index) => {
          const idx = index - (pageCurrent - 1) * pageSize;
          return idx < pageSize && idx >= 0;
        });
        if (value) {
          data = [];
          tableData.forEach((item) => {
            if (item.name.indexOf(value) !== -1) {
              data.push(item);
            }
          });
          total = data.length;
        }

        setTimeout(() => {
          typeof success === "function" &&
            success({
              data: data,
              total: total,
            });
        }, 500);
      },
    },
  };
</script>
<style>
  /* #ifndef H5 */
  /* page {
	padding-top: 85px;
} */
  /* #endif */
  .uni-group {
    display: flex;
    align-items: center;
  }
</style>
